<template>
    <div class="h100">
      <app-head :title="title"></app-head>
      <div >
        <div class="head flex_b">
          <div class="head_img ">
            <img :src="datas.headImg" alt="">
          </div>
          <div style="margin-top: 10px;margin-left: 16px">
            <h3 style="font-size: 20px;color: #444444;height: 28px;text-align: left">{{datas.name}}</h3>
            <p style="color: #777;font-size: 13px;text-align: left">经验值：{{datas.experValue}}</p>
          </div>
        </div>
        <div style="height: 10px;background:#f4f4f4;"></div>
       <div class="que_c">
         <p>训练结束</p>
         <ul class="result">
           <li><span class="col-666">用时</span>  <span>{{result.time}}秒</span></li>
           <li><span class="col-666">答对</span>  <span>{{result.trueNum}}题</span></li>
           <li><span class="col-666">答错</span>  <span>{{result.falseNum}}题</span></li>
           <li><span class="col-666">获得经验值</span>  <span>{{result.exVlue}}</span></li>
         </ul>
         <div style="margin-top: 48px">
           <router-link to="/questionStep1">
             <button class="btn_d act">继续训练</button>
           </router-link>
           <router-link to="/question">
           <button class="btn_d ">退出</button>
           </router-link>
         </div>
       </div>
      </div>

    </div>
</template>

<script>
  import AppHead from '@/components/Head'
    export default {
        name: "QuestionStep3",
      components:{
        AppHead
      },

        data () {
          return {
            title: '问答比拼',
            datas:{},
            result:{}
          }
        },
      mounted:function () {
        this.init()
      },
      methods:{
        init:function () {
          var that = this
          this.$http({
            method: 'get',
            url: '/user/getuser',
            // params:{
            //   id:that.$route.query.id
            // }
          }).then(function (res) {


            that.datas = res.data.datas[0]
              console.log(that.datas )
          }).catch(function (error) {

          })

          this.$http({
            method: 'get',
            url: '/question/questionResult',
            // params:{
            //   id:that.$route.query.id
            // }
          }).then(function (res) {

            console.log(res.data.datas[0] )
            that.result = res.data.datas[0]
          }).catch(function (error) {

          })

        },
      }
    }
</script>

<style scoped lang="less">
  .head{
    width: 258px;
    border-radius:0px 100px 100px 0px;
    height: 88px;
    margin: 24px 0;
    box-shadow:0px 0px 6px 0px rgba(0,0,0,0.3);
    /*align-items: center;*/

    .head_img{
      width: 68px;
      height: 68px;
      border-radius: 50%;
      overflow: hidden;
      margin-top: 10px;
      margin-left: 24px;
      img{
        width: 100%;
        height: 100%;
      }
    }
  }

.col-666{
  color: #666;
  opacity: .8;
}
 .que_c{
   margin-top: 64px;
   p{
     color:#4A90E2;
     font-size:32px;
     margin-bottom: 60px;
   }
 }
 .result{
   width:279px;
   height:98px;
   background:rgba(242,243,246,1);
   border-radius:8px;
   margin: 0 auto;
   list-style: none;
   padding: 16px 0;
   padding-left: 24px;
   li{
     margin-left: 0;
     color: #666666;
     font-size: 15px;
     text-align: left;
      margin-bottom: 4px;
     span{
       display: inline-block;
       width: 33%;
       margin-right: 10%;
       color: #333;

     }
   }
 }
.btn_d{
  width:87%;
  height:44px;
  line-height: 44px;
  color: #fff;
  font-size: 17px;
  background:#CCCCCC;
  border-radius:8px;
  border:1px solid #D8E5F4;
  display: inline-block;
  outline: none;
  margin-bottom: 16px;

}
.btn_d.act{
  background: #4A90E2;
  color: #fff;
}

  .get{
    position: absolute;
    width:77px;
    height:77px;
    line-height: 77px;
    background:rgba(255,165,0,1);
    border-radius:38px;
    opacity:0.6;

    color: #fff;
    font-size: 32px;
    bottom: 36px;
    left: 50%;
    margin-left: -39px;
  }
</style>
